<!--
 * @Date: 2022-03-24 19:11:07
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-03-26 17:30:23
 * @FilePath: \vue3Components\src\components\Container\Container.vue
 * @Description: something
-->
<template>
  <el-container>
    <el-aside width="auto">
      <Navside :collapse="isCollapse"></Navside>
    </el-aside>
    <el-container>
      <el-header>
        <Navheader :collapse="isCollapse" @changToggle="changetoggle"></Navheader>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script lang='ts' setup>
import Navside from '@/components/Container/Navside.vue'
import Navheader from '@/components/Container/Navheader.vue'
import { ref } from 'vue';
let isCollapse = ref(false)
const changetoggle = () => {
  isCollapse.value = !isCollapse.value
}
</script>
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-header {
  padding: 0;
}
</style>